<template>
  <px-dialog v-model="visible" title="区域当前预警" width="60%" align-center>
    <px-table :data="tableData" class="spare-parts-table" size="small" height="400px" border>
      <px-table-column
        v-for="(item, index) in tableColumns"
        :key="index"
        :label="item.label"
        :min-width="item.minWidth"
        :align="item.align"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :fixed="item.fixed"
      >
        <template v-if="item.type === 'level'" #default="scope">
          <px-tag style="color: #fff" round :color="tagBgColorList[scope.row.alarmLevel]"> {{ scope.row.alarmLevel }} </px-tag>
        </template>
        <template v-else-if="item.type === 'pos'" #default="scope">
          <span style="color: #3b82f6; cursor: pointer" @click="handleVisual(scope.row)">
            <px-icon><Location /></px-icon>{{ scope.row.twinName }}
          </span>
        </template>
        <template v-else-if="item.type === 'status'" #default="scope">
          <div v-if="scope.row.alarmStatus === 'OFF'">
            <px-tooltip effect="light" :content="`关闭时间：${scope.row.alarmEndTime}`">
              <px-tag type="info">已关闭</px-tag>
            </px-tooltip>
          </div>
          <px-tag v-else type="danger">报警中</px-tag>
        </template>
        <template v-else-if="item.type === 'remark'" #default="scope">
          <div style="display: flex">
            <px-text class="w-200px" truncated>{{ scope.row.remarkDTO?.remark || "-" }}</px-text>
            <px-button type="primary" link icon="EditPen" @click="handleAddRemark(scope.row)" />
          </div>
        </template>
        <template v-else #default="scope">{{
          scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-"
        }}</template>
      </px-table-column>
    </px-table>

    <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="queryTable" />
  </px-dialog>
</template>

<script setup lang="ts">
import { queryById } from "@/api/alert";
import { PxMessage } from "px-ui";
import { reactive, toRefs, watch } from "vue";
import { useRouter } from "vue-router";

defineOptions({
  name: "ALL_ALERT_BUSINESS_COMP"
});

const visible = defineModel();
const router = useRouter();
const props = defineProps(["code"]);
const handleVisual = row => {
  let { twinId } = row;
  if (twinId) {
    router.push({
      path: "/all/visual/template",
      query: {
        compEmitData: twinId
      }
    });
  } else {
    PxMessage.info("因报警数据尚在梳理补全中，会存在报警点跟位置未绑定的情况，此类数据还不能跳转至可视化，待数据完善~");
  }
};
watch([visible, props.code], () => {
  if (visible.value) {
    queryTable();
  }
});
const tagBgColorList = {
  一级报警: "#E02B2B",
  二级报警: "#FF771E",
  三级报警: "#F1B11A",
  四级报警: "#4A9BFF"
};

const data = reactive<Record<string, any>>({
  queryParams: {
    pageNum: 1,
    pageSize: 20
  },
  tableData: [],
  total: 0,
  alarmTypeList: [],
  tableColumns: [
    { prop: "alarmLevel", label: "级别", minWidth: "80", type: "level", showOverflowTooltip: true, fixed: "left" },
    { prop: "alarmTime", label: "发生时间", minWidth: "120", showOverflowTooltip: true },
    { prop: "point", label: "报警点位", minWidth: "200", showOverflowTooltip: true },
    { prop: "alarmContent", label: "报警内容", minWidth: "200", showOverflowTooltip: true },
    { prop: "alarmType", label: "报警类型", minWidth: "70", showOverflowTooltip: true },
    { prop: "systemName", label: "系统", minWidth: "100", showOverflowTooltip: true },
    { prop: "position", label: "位置", minWidth: "130", type: "pos", showOverflowTooltip: true },
    { prop: "alarmAckStatus", label: "报警状态", minWidth: "80", type: "status", showOverflowTooltip: true }
  ],
  spreadIndex: []
});

const { queryParams, tableData, total, tableColumns } = toRefs(data);
const queryTable = async () => {
  const { time } = queryParams.value;
  const data = await queryById({
    startTime: time && time[0] ? `${time[0]} 00:00:00` : "",
    endTime: time && time[1] ? `${time[1]} 23:59:59` : "",
    alarmStatus: ["ACK", "ON"],
    ...queryParams.value,
    positionCodeList: [props.code],
    alarmCenterFlag: "YES"
  });
  tableData.value = data?.data;
  total.value = data?.total;
};
</script>

<style lang="scss" scoped>
:deep(.px-tabs .px-tabs__item) {
  max-width: 180px;
}
</style>
